<template>
<div style="position:relative;height:100%" ref="mapContainer">
  <div id="cesiumContainer" ref="cesiumContainer" style="width:100%;height:500px"></div>
    <v-card
      class=" nav"
      elevation="12"
      width="612"
    >
      <v-navigation-drawer
        floating
        permanent
        style="background: transparent;width:612px"
      >
        <v-list
          style="background:transparent"
          dense
          rounded
          class="d-flex"
        >
<!--          <v-list-item-->
<!--            style="background:rgba(255,255,255,.7);margin-left: 20px;"-->
<!--            :style="{opacity:0}"-->
<!--            v-for="item in items"-->
<!--            :key="item.title"-->
<!--            link-->
<!--            @click="dialogForm = true"-->
<!--          >-->
<!--            <v-list-item-icon>-->
<!--              <v-icon>{{ item.icon }}</v-icon>-->
<!--            </v-list-item-icon>-->

<!--            <v-list-item-content>-->
<!--              <v-list-item-title>{{ item.title }}</v-list-item-title>-->
<!--            </v-list-item-content>-->
<!--          </v-list-item>-->
          <v-list-item
            style="background:rgba(255,255,255,.7);margin-left: 20px;"
            link
          >

            <input style="border:none;outline: none;" placeholder="请输入查询地点" v-model="search">
            </input>

            <v-btn
              tile
              small
              color="success"
              @click="srarch"
            >
              <v-icon left>
                mdi-pencil
              </v-icon>
              搜索
            </v-btn>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
    </v-card>

  <v-dialog
      v-model="dialog"
      width="500"
    >
      <v-card>
        <v-toolbar color="primary" dark>详情信息</v-toolbar>
        <v-card-title class="d-flex justify-space-between">
          <div>项目编码: </div>
          <div>{{info.matterCode}}</div>
        </v-card-title>
        <v-card-title class="d-flex justify-space-between">
          <div>项目名称: </div>
          <div>{{info.matterName}}</div>
        </v-card-title>
        <v-card-title class="d-flex justify-space-between">
          <div>项目单位: </div>
          <div>{{info.companyName}}</div>
        </v-card-title>
        <v-card-title class="d-flex justify-space-between">
          <div>预算: </div>
          <div>{{info.budget}}</div>
        </v-card-title>
        <v-card-title class="d-flex justify-space-between">
          <div>当前进度百分比: </div>
          <div>{{parseFloat(info.currentProgress) * 100}}%</div>
        </v-card-title>

        <v-divider></v-divider>

        <v-card-actions class="justify-end">
          <v-btn
            text
            @click="dialog = false"
          >关闭</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>


    <v-dialog
    persistent
        v-model="dialogForm"
        max-width="350px"
      >
        <v-card>
          <v-card-title></v-card-title>
          <v-card-text>
            <v-text-field label="项目名称" v-model="form.matterName" hide-details="auto"></v-text-field>
            <v-text-field label="项目编码" v-model="form.matterCode" hide-details="auto"></v-text-field>


            <v-menu
      :close-on-content-click="false"
      transition="scale-transition"
      offset-y
      min-width="auto"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-text-field
          v-model="form.startDate"
          hide-details="auto"
          label="计划开始时间"
          readonly
          v-bind="attrs"
          v-on="on"
        ></v-text-field>
      </template>
      <v-date-picker
        v-model="dates"
        range
        @change="startDateChange"
      ></v-date-picker>

    </v-menu>

    <v-menu
      :close-on-content-click="false"
      transition="scale-transition"
      offset-y
      min-width="auto"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-text-field
        hide-details="auto"
          v-model="form.endDate"
          label="计划竣工时间"
          readonly
          v-bind="attrs"
          v-on="on"
        ></v-text-field>
      </template>
      <v-date-picker
        v-model="dates"
        range
        @change="endDateChange"
      ></v-date-picker>

    </v-menu>

  <v-text-field label="最小金额" v-model="form.startBudget" hide-details="auto"></v-text-field>
  <v-text-field label="最大金额" v-model="form.endBudget" hide-details="auto"></v-text-field>

            <v-select
              :items="[{text:'硬件',value:'HARDWARE'},{text:'软件服务',value:'SOFTWARW'}]"
              label="项目类型"
              item-value="value"
              v-model="form.matterType"
              hide-details="auto"
            ></v-select>
          </v-card-text>
          <v-card-actions>


          <v-spacer></v-spacer>
          <v-btn
            color="blue darken-1"
            text
            @click="dialogForm = false"
          >
            关闭
          </v-btn>
          <v-btn
            color="blue darken-1"
            text
            @click="close"
          >
            重置
          </v-btn>
          <v-btn
            color="blue darken-1"
            @click="submit"
            text
          >
            提交
          </v-btn>

          </v-card-actions>
        </v-card>
      </v-dialog>


    <v-dialog
      v-model="searchDialog"
      width="600px"
    >

      <v-card>
        <v-list two-line>
      <v-list-item-group
        active-class="pink--text"
        multiple
      >
          <v-list-item  v-for="(item,index) in pois" :key="index" @click="clickSearch(item.location)" style="border-bottom:1px solid #f4f4f4;">
              <v-list-item-content>
                <v-list-item-title v-text="item.name"></v-list-item-title>

                <v-list-item-subtitle
                  class="text--primary"
                >{{item.type}}</v-list-item-subtitle>

                <v-list-item-subtitle v-text="item.address"></v-list-item-subtitle>
              </v-list-item-content>

          </v-list-item>

      </v-list-item-group>
    </v-list>
      </v-card>
    </v-dialog>

</div>

</template>
<script>
var viewer, handler;
// event maker
//
import axios from 'axios'
export default {
  data(){
    return{
      pois:[],// 数据数组
      searchDialog:false,
      search:'',
      dates: [],
      date:'',
      dialogForm:false,
      dialog:false,
      items: [
          { title: '按项目搜索', icon: 'mdi-view-dashboard' },
        ],
        form:{
          matterName:'',
          matterCode:'',
          startBudget:'',
          endBudget:'',
          planOnDateStart:'',
          planOnDateEnd:'',
          planFinishDateStart:'',
          planFinishDateEnd:'',
          matterType:'',
          startDate:'',
          endDate:''
        },
      info:{
        matterCode:'',
        matterName:'',
        companyName:'',
        budget:'',
        currentProgress:''
      },
    }
  },
  mounted() {
    // 高度
    this.$refs.cesiumContainer.style.height =  this.$refs.mapContainer.offsetHeight + 'px'

    window.addEventListener('message',event => {
      const { data } = event
      console.log(data,'data');
      if(data.event){
        console.log(data,'子打印');
        this[data.event](data.params)
      }
    })

    window.startupCalled = true;
    this.init();
  },
  methods: {
    clickSearch(location){
      let arr = location.split(',')
      this.searchDialog = false
      console.log(arr);


      viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(arr[0], arr[1]),
          billboard: {
            image: require('../assets/dw.png'),
            pixelOffset: new Cesium.Cartesian2(0, -10),
            scale: 0.1,
            width: 200,
            height: 200,
          },
        });


      viewer.camera.flyTo({//定位过去
          destination: Cesium.Cartesian3.fromDegrees(arr[0], arr[1],1800),
          orientation: {
            heading: Cesium.Math.toRadians(0.0),
            pitch: Cesium.Math.toRadians(-25.20),
          },
      });

    },
    srarch(){
      if(!this.search) return
      axios.get(`https://restapi.amap.com/v3/place/text?keywords=${this.search}&city=沈阳&offset=20&page=1&key=48755dfe1035054daf637e354221d76b`).then(res=>{
        this.pois = res.data.pois
        this.searchDialog = true
      })
    },
    close(){
      for (let i in this.form) {
          this.form[i] = ''
      }
    },
    submit(){
      console.log(this.form);
      window.parent.postMessage({
        params:this.form
      },'*')
      this.dialogForm = false
      this.close()
    },
    startDateChange(date){
      this.form.planOnDateStart = date[0] + ' 00:00:00'
      this.form.planOnDateEnd = date[1] + ' 23:59:59'
      this.form.startDate = date[0] + '~' + date[1]
    },
    endDateChange(date){
      this.form.planFinishDateStart = date[0] + ' 00:00:00'
      this.form.planFinishDateEnd = date[1] + ' 23:59:59'
      this.form.endDate = date[0] + '~' + date[1]
    },
    addMakerArr(arr){
      viewer.entities.removeAll()
      arr.forEach(p=>{
        console.log(p);
        this.addMaker(p)
      })
    },
    addMaker(p){
        viewer.entities.add({
          label: {
            text: p.matterName,
            font: '400 12px Helvetica',
            pixelOffset: new Cesium.Cartesian2(0, -70),
            showBackground: true,
            backgroundColor: new Cesium.Color(0 / 255, 0 / 255, 0 / 255, 1.0)
          },
          position: Cesium.Cartesian3.fromDegrees(p.longitude, p.latitude),
          billboard: {
            image: require('../assets/caremra.png'),
            pixelOffset: new Cesium.Cartesian2(0, 0),
            scale: 0.1,
            width: 210,
            height: 588,
          },
          monitoItems:p
        });
        viewer.camera.flyTo({//定位过去
            destination: Cesium.Cartesian3.fromDegrees(p.longitude, p.latitude,1800),
            orientation: {
              heading: Cesium.Math.toRadians(0.0),
              pitch: Cesium.Math.toRadians(-25.20),
            },
        });

    },
    init() {
      viewer = new Cesium.Viewer("cesiumContainer", {infoBox: false,isSct: false,});
      viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT;
      viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT;
      viewer._cesiumWidget._creditContainer.style.display = 'none';

      var imageryLayers = viewer.imageryLayers;
      var provider = new Cesium.UrlTemplateImageryProvider({ url: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}" })
      var imagery = imageryLayers.addImageryProvider(provider);
      imagery.alpha = 1.0;


      viewer.scene.camera.flyTo({
        destination: new Cesium.Cartesian3.fromDegrees(
          123.464675, 41.682768, 1880
        ),
        orientation: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-25.20), //从上往下看为-90
        },
      });

          // try {
          //       var promise = viewer.scene.open('http://124.95.134.62:8195/portalproxy/iserver/services/3D-quanshibaimo/rest/realspace');
          //       var promise2 = viewer.scene.open('http://124.95.134.62:8195/portalproxy/iserver/services/3D-ChengShiDaoLuSanWeiMoXing/rest/realspace');
          //       Cesium.when(promise, function (layer) {
          //         window.parent.postMessage({
          //           mapSuccess:true
          //         },'*')
          //       }, function (e) {
          //           if (widget._showRenderLoopErrors) {
          //               var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
          //               widget.showErrorPanel(title, undefined, e);
          //           }
          //       });
          //   } catch (e) {
          //       if (widget._showRenderLoopErrors) {
          //           var title = '渲染时发生错误，已停止渲染。';
          //           widget.showErrorPanel(title, undefined, e);
          //       }
          //   }

      handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      handler.setInputAction((e) => {
        console.log(e.position);
        var pick = viewer.scene.pick(e.position);
        console.log(pick);
        if (!pick || !pick.id._monitoItems) return
        this.info = pick.id._monitoItems
        // 调用弹窗方法
        this.dialog = true




        // {
        //   const {lng,lat} = this.getlonLat(e)
        //   this.addMaker({lng,lat,title:'王王'},)
        // }
        // viewer.scene.pick(e.position)
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    },
    getlonLat(e){
      var ellipsoid = viewer.scene.globe.ellipsoid;
      var cartesian = viewer.camera.pickEllipsoid(e.position, ellipsoid);
      var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      var lng = Cesium.Math.toDegrees(cartographic.longitude);
      var lat = Cesium.Math.toDegrees(cartographic.latitude);
      return {lng,lat}
    },
  }
}
</script>
<style lang="less" scoped>
/deep/.cesium-viewer-navigationContainer,.sm-compass-outer-ring{
  display: none;
}
.nav{
  position: absolute;
  z-index: 2022;
  top: 0;
  left: 0;
  background: transparent;
  box-shadow: 0 0 0!important;
}


</style>
